<template>
  <div class="account">
    <!-- 按钮开始 -->
      <div class="button">
          <!-- 时间框开始 -->
         <div class="block">
          <el-date-picker
            size='mini'
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
         </div>
          <!-- 时间框结束 -->
 
          <!-- 选择器开始 -->
          <!-- clearable选中后可以删除 -->
     <!--查询操作   v-model="list.xxx"  xxx是swagger里Parameters的  数据不仅能从data流向⻚⾯，还可以从⻚⾯流向data -->
          <el-select size='mini' clearable v-model="list.status" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!-- 选择器结束 -->
      <!--查询操作    v-model="list.xxx"  xxx是swagger里Parameters的 数据双向绑定-->
          <el-input size='mini' placeholder="申请人编号" v-model="list.userId" class="wenzi"></el-input>  
      <!-- @click="findH" -->
          <el-button @click="findH" size='mini' type="primary" class="cha">查询</el-button>
        </div>
    <!-- 按钮结束 -->

    <!-- 表格开始 -->
           <el-table
              size='small'
              :data="trues"
              border
              style="width: 100%">
        <!-- prop里放查询所有后台的数据 -->
              <el-table-column
                prop="id"
                label="序号"
                width="120">
              </el-table-column>
              <el-table-column
                prop="userId"
                label="申请人编号"
                width="120">
              </el-table-column>
              <el-table-column
                prop="realname"
                label="姓名"
                width="90">
              </el-table-column>
              <el-table-column
                prop="applyTime"
                label="申请时间"
                width="120">
              </el-table-column>
              <el-table-column
                prop="idCard"
                label="身份证号"
                width="120">
              </el-table-column>
              <el-table-column
                label="身份证正面"
                width="200">
       <!-- 传图片 -->
              <template slot-scope="scope">
                          <el-popover trigger="hover"  placement="top">
                              <img width="130px" :src="scope.row.idcardPhotoPositive">
                              <div slot="reference" class="name-wrapper">
                              <img width="50px" :src="scope.row.idcardPhotoPositive">
                              </div>
                          </el-popover>
              </template>   

              </el-table-column>
              <el-table-column
                label="身份证反面"
                width="120">
       <!-- 传图片 -->
              <template slot-scope="scope">
                          <el-popover trigger="hover"  placement="top">
                              <img width="130px" :src="scope.row.idcardPhotoNegative">
                              <div slot="reference" class="name-wrapper">
                              <img width="50px" :src="scope.row.idcardPhotoNegative">
                              </div>
                          </el-popover>
              </template>   

              </el-table-column>
              <el-table-column
                prop="bankCard"
                label="银行卡号"
                width="120">               
              </el-table-column>
              <el-table-column
                label="银行卡"
                width="120">
         <!-- 传图片 -->
                <template slot-scope="scope">
                          <el-popover trigger="hover"  placement="top">
                              <img width="130px" :src="scope.row.bankCardPhoto">
                              <div slot="reference" class="name-wrapper">
                              <img width="50px" :src="scope.row.bankCardPhoto">
                              </div>
                          </el-popover>
              </template>  

              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                width="120">
              </el-table-column>
              <el-table-column
                prop="reason"
                fixed="right"
                label="操作"
                width="130">

               <template slot-scope="scope">
      <!-- @click="passH(scope.row.xx)绑定事件 -->
                   <el-button type="text" @click="passH(scope.row.id)" style="color:#4e80b1">通过</el-button>
                 <el-button type="text" @click="nopassH(scope.row.id)" style="color:#ff5858">不通过</el-button>             
              </template>  
              </el-table-column>

            </el-table>
    <!-- 表格结束 -->

       <!-- 分页开始 -->
    <div class="page">
      <el-pagination
      size='small'
          @current-change="changeHandler"
          :page-sizes="[2, 5, 10, 15,20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="2">
        </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>


<script>
// 引入vuex
import {mapState,mapActions} from 'vuex'
export default {
  data() {
    return{
      // 时间框
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
       // 选择器  value  label一致
        options: [
        {
          value: '通过',
          label: '通过'
        },
        {
          value: '不通过',
          label: '不通过'
        },
        {
          value: '未审核',
          label: '未审核'
        },
        ],
      // 表格的
        list:{
        page:1,
        pageSize:7,
        },
      // 进行定义
        input:'',
        value: '',
        value2: '',

      };

    },


// audit_true  js的文件名
 computed:{
  ...mapState('audit_true',['trues','total'])
 },


// audit_true  js的文件名    findAllTrues,aduitPass,aduitNoPass是在js里定义的函数名
 methods:{
  ...mapActions('audit_true',['findAllTrues','aduitPass','aduitNoPass']),

//分页
    changeHandler(page){
      this.list.page = page
      this.findAllTrues(this.list)
    },
    
//查询
   // findAllTrues里定义的
    findH(){
      this.findAllTrues(this.list)
    },

// 通过
    // 按钮click绑定的
     passH(id){
        let params = {
          id
        }
      // aduitPassjs里定义的
        this.aduitPass(params).then(res =>{
          if(res.status === 200){
      // findAllTrues里定义的
            this.findAllTrues(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },

// 不通过
    nopassH(id){
        let params = {
          id
        }
        this.aduitNoPass(params).then(res =>{
          if(res.status === 200){
            this.findAllTrues(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
        },

 },


 created(){
    this.findAllTrues(this.list)
 }

}
</script>


<style scoped>
.button {
  display: flex;
}
.wenzi{
  width: 190px;
  padding-left: 20px;
  padding-right: 20px;
}
.page {
  float: right;
}
</style>